<template>
	<view class="qilin-changeCityContent">
		<scroll-view class="qilin-changeCityContent-scrollView" scroll-y :scroll-into-view="alphaId">
			<view class="qilin-changeCityContent-position">
				<view class="qilin-changeCityContent-position-icon">
					<icon class="iconfont icon-31dingwei" size="12" />
					<text>自动定位</text>
				</view>
				<view class="qilin-changeCityContent-position-text">{{currentCity}}</view>
			</view>
			<view class="qilin-changeCityContent-hotCity">
				<view class="qilin-changeCityContent-hotCity-title">
					<icon class="iconfont icon-huo" size="12"></icon>
					<text>抖音热门城市</text>
				</view>
				<view class="qilin-changeCityContent-hotCity-city">
					<view class="qilin-changeCityContent-hotCity-city-item" v-for="item in cityList" :key="item.id"
						@click="selectCity(item.name)"
					>{{item.name}}</view>
				</view>
			</view>
			<view class="qilin-changeCityContent-allCity">
				<view class="qilin-changeCityContent-allCity-box" v-for="item in citys" :key="item.initial">
					<view class="qilin-changeCityContent-allCity-initial" :id="item.initial">{{item.initial}}</view>
					<view class="qilin-changeCityContent-allCity-city" v-for="item1 in item.list" :key="item1.value"
						@click="selectCity(item1.name)"
					>{{item1.name}}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"changeCityContent",
		props:["citys","alpha"],
		data() {
			return {
				cityList:[//热门城市列表数据
					{
						id:1,
						name:"深圳"
					},
					{
						id:2,
						name:"北京"
					},
					{
						id:3,
						name:"上海"
					},
					{
						id:4,
						name:"成都"
					},
					{
						id:5,
						name:"广州"
					},
					{
						id:6,
						name:"重庆"
					},
					{
						id:7,
						name:"西安"
					},
					{
						id:8,
						name:"苏州"
					},
					{
						id:9,
						name:"武汉"
					},
					{
						id:10,
						name:"杭州"
					},
					{
						id:11,
						name:"郑州"
					},
					{
						id:12,
						name:"南京"
					}
				],
				alphaId:"",//点击字母跳转到对应的城市字母页
				currentCity:"南京",//当前所在城市
			};
		},
		watch:{
			alpha(nv,ov){
				// console.log(nv,ov);
				this.alphaId=nv;
			}
		},
		methods:{
			//点击城市选择当前城市事件监听
			selectCity(name){
				this.currentCity=name;
				uni.setStorage({
					key:"currentCity",
					data:name
				});
				uni.redirectTo({
					url:"/pages/city/city"
				});
			}
		},
		mounted(){
			this.currentCity=uni.getStorageSync("currentCity");
		}
	}
</script>

<style>
.qilin-changeCityContent{
	background-color:#100f1f;
	padding-top:120rpx;
	color:#fff;
	width:100%;
	height:100%;
}
.qilin-changeCityContent-scrollView{
	width:100%;
	height:100%;
}
.qilin-changeCityContent-position{
	background-color:#181725;
	padding:20rpx;
}
.qilin-changeCityContent-position-icon{
	display:flex;
	align-items:center;
	/* height:50rpx;
	line-height:50rpx; */
}
.qilin-changeCityContent-position-icon>icon{
	color:#2cb3cc;
	font-size:30rpx;
	margin-right:5rpx;
}
.qilin-changeCityContent-position-icon>text{
	font-size:24rpx;
}
.qilin-changeCityContent-position-text{
	font-size:24rpx;
	color:#666;
	margin-top:6rpx;
}
.qilin-changeCityContent-hotCity{
	margin-top:20rpx;
	background-color:#181725;
	padding:20rpx;
}
.qilin-changeCityContent-hotCity-title{
	display:flex;
	align-items:center;
	font-size:24rpx;
	color:#fff;
}
.qilin-changeCityContent-hotCity-title>icon{
	margin:0 5rpx 0 10rpx;
}
.qilin-changeCityContent-hotCity-city{
	display:flex;
	flex-flow:row wrap;
	padding:20rpx 0;
	width:100%;
}
.qilin-changeCityContent-hotCity-city-item{
	width:30%;
	/* margin:0 8rpx 8rpx 0; */
	margin-left:2.5%;
	margin-bottom:8rpx;
	background-color:#262734;
	color:#fff;
	font-size:24rpx;
	text-align:center;
	padding:20rpx 0;
}
.qilin-changeCityContent-allCity{
	/* margin-top:20rpx; */
	background-color:#181725;
}
.qilin-changeCityContent-allCity-box{
	
}
.qilin-changeCityContent-allCity-initial{
	background-color:#100f1f;
	font-size:20rpx;
	color:#666;
	padding:10rpx 20rpx;
}
.qilin-changeCityContent-allCity-city{
	font-size:30rpx;
	color:#fff;
	padding:20rpx;
	background-color:#181725;
}
</style>
